<template>
	<view class="padding">
		<view class="lineGray1 line marginTop2">
			<view class="lineBlack " style="flex-grow: 2;"></view>
			<view style="flex-grow: 2;"></view>
		</view>
		<view class="line textblack14 marginTop2">验证码已发送至手机</view>
		<view class="line textblack14 marginTop">{{phone}}</view>
		<view>
			<input v-model="code" class="underline-input marginTop3" focus placeholder="输入验证码" />
		</view>
		<view v-show="percent!=0" class="line marginTop">（{{percent}} 秒后可重新获取验证码）</view>
		<view class="line textblue14 marginTop" v-show="percent==0" @click="click"> 重新发送</view>

		<button type="primary" v-show="code" class="bigMarginTop" @click="check">下一步</button>
		<button v-show="!code" class="bigMarginTop" @click="check">下一步</button>
	</view>
</template>

<script>
	export default {
		onLoad: function(query) {

			this.id = query.id;
			this.phone = query.phone;
			this.type = query.type;
			if(this.type==2){
				uni.setNavigationBarTitle({
					title:"忘记密码"
				})
			}else{
				uni.setNavigationBarTitle({
					title:"注册"
				})
			}
		
		},
		onShareAppMessage(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},

		onReady: function() {
			const that = this;
			that.timer = setInterval(function() {
				console.log(that.percent)
				that.percent--;
				if (that.percent < 0) {
					that.percent = 0;
					if (that.timer != undefined) {
						clearInterval(that.timer)
						that.timer = null;
					}
				}
			}, 1000);
		},

		data() {
			return {
				phone: "",
				code: "",
				id: 0,
				timer: null,
				percent: 60,
				type: 1,
			}
		},
		methods: {
			click() {
				const that = this;
				that.percent = 60;
				that.timer = setInterval(function() {
					console.log(that.percent)
					that.percent--;
					if (that.percent < 0) {
						that.percent = 0;
						if (that.timer != undefined) {
							clearInterval(that.timer)
							that.timer = null;
						}
					}
				}, 1000);
				this.resend()
			},
			check: function() {
				const that = this;
				const url = getApp().globalData.apiUrl + "/api/v1/messagecode/check?phone=" + this.phone + "&code=" +
					this.code;
				uni.request({
					url: url,
					data: {

					},
					method: 'GET',
					success: (res) => {

						console.log(res)
						if (res.data.code == 0) {
							if (that.type == 2) {
								if (res.data.data) {
									uni.navigateTo({
										url: "/pages/Login/changePassword?phone=" + that.phone
									})
								} else {
									uni.showToast({
										title: "验证码错误"
									})
								}

							} else {

								if (res.data.data) {
									uni.navigateTo({
										url: "/pages/Login/Register?phone=" + that.phone
									})
								} else {
									uni.showToast({
										title: "验证码错误"
									})
								}
							}

						} else {
							uni.showToast({
								icon: 'error',
								title: res.data.message
							})
						}

					}
				});
			},
			resend: function() {
				const that = this;

				const url = getApp().globalData.apiUrl + "/api/v1/messagecode";

				uni.request({
					url: url,
					data: {
						phone: this.phone
					},
					method: 'POST',
					success: (res) => {

						console.log(res)
						if (res.data.code == 0) {
							uni.showToast({
								icon: 'error',
								title: "发送成功"
							})
						} else {
							uni.showToast({
								icon: 'error',
								title: res.data.message
							})
						}

					}
				});


			},

		}
	}
</script>

<style>
	@import url("../../../common/uni.css");




	button[type=primary] {
		background-color: #282828;
	}


	.lineBlack {

		height: 8px;
		background: #282828;
		border-radius: 7px 7px 7px 7px;
	}

	.lineGray1 {

		height: 8px;
		background: #D9DBE0;
		border-radius: 7px 7px 7px 7px;

	}




	.bg {
		height: 100vh;
		background-color: #FFFFFF;
	}
</style>